<template>
    <div class="commoncon register">
        <Other-Header @changelang="changeLanguage" bgColor="#5741d9"></Other-Header>
        <div class="comcont" @click="isShow = false;">
            <div class="layer" style="overflow:hidden;">
                <div class="sideinfo">
                    <img src="../assets/images/swiper-slide-2.svg">
                    <h2>{{$t('l.personal_265')}}</h2>
                    <p>{{$t('l.personal_266')}}</p>
                </div>
                <!--注册-->
                <div class="logonpanel">
                    <h2 class="paneltitle">{{$t('l.personal_267')}}</h2>
                    <div class="regModetab">
                       <!-- <span :class="regMode=='phone'?'active':''" @click.stop="regMode='phone'">{{$t('l.personal_268')}}</span> -->
                        <span :class="regMode=='email'?'active':''" @click.stop="regMode='email'">{{$t('l.personal_269')}}</span>
                    </div>
                    <div class="regModeCon" v-show="regMode=='phone'">
                        <div class="putgroup clearfix">
                            <div class="areacodeput">
                                <input @focus="showlist" @click.stop v-model="selectValue" class="icon-arrow" />
                                <drop-down @inputValue="getInputValue" @item-click="itemClick" :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext" :isShow="isShow" style="width:349px;"></drop-down>
                            </div>
                            <input class="comput" v-model="account" :placeholder="$t('l.personal_256')" style="width:225px;">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <nc-slider @callback="ncPhoneHandle"></nc-slider>
                        </div>
                        <div class="putgroup">
                            <div class="codeput">
                                <input class="comput" v-model="code" :placeholder="$t('l.personal_44')">
                                <button v-show="sendAuthCode" class="getcode active" @click.stop="sendPhoneCode" :disabled="!this.ncPhonePass">{{$t('l.personal_45')}}</button>
                                <button v-show="!sendAuthCode" class="getcode">{{auth_time}}s</button>
                            </div>
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" v-model="password" type="password" :placeholder="$t('l.personal_257')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" v-model="rePassword" type="password" :placeholder="$t('l.add_53')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup" style="margin-bottom:12px;">
                            <input class="comput" v-model="invitcode" :placeholder="$t('l.personal_270')">
                            <p class="errortext"></p>
                        </div>
                        <label class="checkbox agreebox" :class="isAgree?'active':''" @click.stop="isAgree=!isAgree">
                            <router-link :to="{path:'/applyToList', query: {typeCode: 'termsOfService'}}">《{{$t('l.personal_271')}}》</router-link>
                            <router-link :to="{path:'/applyToList', query: {typeCode: 'privacyPolicy'}}">《{{$t('l.personal_272')}}》</router-link>
                        </label>
                    </div>
                    <div class="regModeCon" v-show="regMode=='email'">
                        <div class="putgroup clearfix">
                            <input class="comput" v-model="account" :placeholder="$t('l.add_35')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <nc-slider @callback="ncEmailHandle"></nc-slider>
                        </div>
                        <div class="putgroup">
                            <div class="codeput">
                                <input class="comput" v-model="code" :placeholder="$t('l.personal_44')">
                                <button v-show="sendAuthCode" class="getcode active" @click="sendEmailCode" :disabled="!this.ncEmailPass">{{$t('l.personal_45')}}</button>
                                <button v-show="!sendAuthCode" class="getcode">{{auth_time}}s</button>
                            </div>
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" v-model="password" type="password" :placeholder="$t('l.personal_257')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" v-model="rePassword" type="password" :placeholder="$t('l.add_53')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup" style="margin-bottom:12px;">
                            <input class="comput" v-model="invitcode" :placeholder="$t('l.personal_270')">
                            <p class="errortext"></p>
                        </div>
                        <label class="checkbox agreebox" :class="isAgree?'active':''" @click.stop="isAgree=!isAgree"><span>{{$t('l.add_54')}}</span>
                            <router-link :to="{path:'/applyToList', query: {typeCode: 'termsOfService'}}">《{{$t('l.personal_271')}}》</router-link>
                            <router-link :to="{path:'/applyToList', query: {typeCode: 'privacyPolicy'}}">《{{$t('l.personal_272')}}》</router-link>
                        </label>
                    </div>

                    <a class="btn big" @click.stop="verification" style="margin-top:12px;">{{$t('l.header_12')}}</a>
                    <p class="regandforget clearfix">
                        <router-link to="/forgetpsd" class="fl">{{$t('l.personal_264')}}</router-link>
                        <router-link to="/login" class="fr">{{$t('l.personal_273')}}</router-link>
                    </p>
                    <p class="sgcinfo">{{$t('l.personal_261')}}</p>
                </div>
            </div>
        </div>
        <Footer></Footer>

    </div>
</template>
<style lang="less" scoped="scoped">
.register{
	padding-top: 100px;
    position: absolute;
    top: 0;
    min-height: 100%;
    width: 100%;

    .comcont {
        padding-bottom: 220px;
    }
    .agreebox{
        a{
            font-size:12px;
            color:#2D8DFE;
        }
    }
    .sideinfo{
        margin-left:130px;
        margin-top:105px;
        text-align:center;
        float:left;
        img{
            padding-bottom:31px;
                max-height: 300px;
        }
        h2{
            font-size:28px;
            font-weight:500;
            color:rgba(51,56,94,1);
            line-height:40px;
            text-align:center;
        }
        p{
            font-size:16px;
            color:#33385E;
            line-height:27px;
            font-weight:400;
            width:242px;
            padding-top:12px;
            margin:0 auto;
        }
    }
    .logonpanel{
        float:left;
        width: 465px;
        padding:0 55px 46px 48px;
        background:#fff;
        box-shadow:0px 6px 18px 0px rgba(29,35,93,0.06);
        border-radius:10px;
        margin-top:82px;
        margin-left:80px;
        min-height:503px;
        position: relative;
        max-width: 454px;
        box-sizing: border-box;
        .regModetab{
            padding-top:20px;
            padding-bottom:24px;
            text-align:center;
            span{
                font-size:16px;
                color:#33385E;
                line-height:100%;
                padding-bottom:6px;
                box-sizing: border-box;
                margin:0 10px;
                cursor:pointer;
                &.active{
                    color:#2D8DFE;
                    border-bottom:2px solid #2D8DFE;
                }
            }
        }
        .paneltitle{
            padding-top:34px;
            text-align:center;
            font-size:22px;
            font-familyA:"Roboto-Medium";
            font-weight:500;
            color:rgba(51,56,94,1);
            line-height:25px;
        }
        .regandforget{
            padding-top:14px;
            a{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
            }
        }
        .sgcinfo{
            margin-top:45px;
            padding-left:45px;
            font-size:16px;
            font-weight:400;
            color:rgba(51,56,94,1);
            line-height:26px;
            background:url(../assets/images/sgcico.png) no-repeat left center;
        }
        .codetip{
            padding-bottom:34px;
            font-size:16px;
            color:#33385E;
            line-height:100%;
            height:50px;
            box-sizing: border-box;
        }
    }
    .vue-dropdown.default-theme .list-module li .list-item-name{display:block !important;}
    .areacodeput {
        position: relative;
        text-align: left;
        input {
            width: 78%;
            text-align: left;
            text-indent: 14px;
        }
        &::before {
            position: absolute;
            content: "";
            width: 28px;
            height: 16px;
            right: 0;
            top: 18px;
            background: url(../assets/images/arrow_btm.png) no-repeat center / 8px 4px;
        }
    }
}

</style>

<script>
import commonMixins from "@/mixins";
import OtherHeader from "../components/otherHeader";
import Footer from "../components/footer";
import dropDown from "../components/dropdown";
import {api} from '../api/api';
import md5 from 'js-md5';
import NC from "../components/nc";
export default {
    mixins: [commonMixins],
    components: {
        OtherHeader,
        Footer,
        dropDown,
        'nc-slider': NC
    },
    data() {
        return {
           itemlist: [],
           datalist:[],
            placeholder: this.$t('l.add_36'),
            nodatatext: this.$t('l.add_37'),
            selectValue: "+86",
            isShow:false,
            account:'',
            code:'',
            password:'',
            rePassword:'',
            invitcode:'',
            regMode:'email',
            sendAuthCode:true,
            auth_time: 0,
            onceToken:"",
            userSource:1,
            isAgree:true,
            ncPhone: null,
            ncEmail: null,
            ncPhonePass: false,
            ncEmailPass: false,
            ncPhoneData: null,
            ncEmailData: null
        }
    },
    created(){
        this.invitcode = this.$route.query.invite;
    },
    methods:{
        changeLanguage(){

        },
        ncReset() {
            this.ncPhoneData = null
            this.ncPhonePass = false
            this.ncEmailData = null
            this.ncEmailPass = false
            this.ncPhone && this.ncPhone.reset()
            this.ncEmail && this.ncEmail.reset()
        },
        ncPhoneHandle(nc, data) {
            this.ncPhone = nc
            this.ncPhoneData = data
            this.ncPhonePass = true
        },
        ncEmailHandle(nc, data) {
            this.ncEmail = nc
            this.ncEmailData = data
            this.ncEmailPass = true
        },
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 120;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        },
        itemClick(data) {
            this.selectValue= data.code;
            this.isShow = false;
        },
        getInputValue(searchvalue) {
           if(searchvalue==""){
                this.itemlist = this.datalist;
                return;
            }
            let itemlist = [];
            // 请求获取筛选列表

            this.datalist.forEach((item,index)=>{
                if(item.code.indexOf(searchvalue) != -1){
                    itemlist.push(item);
                }
            })
            this.itemlist = itemlist;
        },
        showlist(){
            this.isShow = true;
        },
        verification(){
            let that = this;
            let flag = false;
            if(that.account==""){
                that.$layer.msg(that.$t('l.add_55'));
                flag = true;
            }else if(that.password==""){
                that.$layer.msg(that.$t('l.add_56'));
                flag = true;
            }else if(that.password!==that.rePassword){
                that.$layer.msg(that.$t('l.personal_221'));
                flag = true;
            }else if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/.test(that.password)){
                that.$layer.msg(that.$t('l.add_40'));
                flag = true;
            }else if(!that.isAgree){
                that.$layer.msg(that.$t('l.add_40'));
                flag = true;
            }else if(!that.invitcode){
                that.$layer.msg(that.$t('l.add_163'));
                flag = true;
            }
            if(!flag){
                that.regist();
            }
        },
        //判断当前终端
        getloginSource(){
            let that = this;
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
               var u = navigator.userAgent, app = navigator.appVersion;
               var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
               var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
               if(isAndroid){
                    that.userSource = 2;
               }else if(isIOS){
                    that.userSource = 3;
               }
            }else{
                that.userSource = 1;
            }
        },
        //注册
        async regist(){
            let that = this;
            let ncData = this.regMode=='phone' ? this.ncPhoneData : this.ncEmailData;
            let res = await api.register({
                account:that.account,
                areaCode:that.selectValue,
                inviteCode:that.invitcode,
                onceToken:that.onceToken,
                password:md5(that.password),
                verifyCode:that.code,
                userSource:that.userSource,

            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_39'));
                that.$router.push({
                    path: "/login"
                });
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==1010010){
                that.$layer.msg(that.$t('l.add_121'));
            }else{
                this.ncReset();
                that.$layer.msg(res.data.msg);
                that.createOnceToken();
            }
        },
        //发送验证码
        async sendEmailCode(){
            let that = this;
            let ncData = this.regMode=='phone' ? this.ncPhoneData : this.ncEmailData;
            let res = await api.sendEmailCodelogin({
                email:that.account,
                type:"S",
                ncToken: ncData && ncData.nc_token,
                sessionId: ncData && ncData.sessionid,
                sig: ncData && ncData.sig,
                'scene':'nc_login'
            })
            if(res.data.code==0){
                that.getAuthCode();
                that.$layer.msg(that.$t('l.other_a_38'));
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==12000){
                that.$layer.msg(that.$t('l.add_119'));
            }else if(res.data.code==1010003){
                that.$layer.msg(that.$t('l.personal_73'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let ncData = this.regMode=='phone' ? this.ncPhoneData : this.ncEmailData;
            let res = await api.sendPhoneCodelogin({
                areaCode:that.selectValue,
                phone:that.account,
                type:"S",
                ncToken: ncData && ncData.nc_token,
                sessionId: ncData && ncData.sessionid,
                sig: ncData && ncData.sig,
                'scene':'nc_login'
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==12000){
                that.$layer.msg(that.$t('l.add_119'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //获取一次性token
        async createOnceToken(){
            let that = this;
            let res = await api.createOnceToken()
            if(res.data.code==0){
                that.onceToken = res.data.data.resultToken;
            }
        },
        //获取区号
        async getAreacode(){
            let that = this;
            let res = await api.selectList({
                category:"AREA_CODE",
                language:"zh_CN"
            })
            if(res.data.code==0){
                that.datalist = [];
                that.itemlist = [];
                res.data.data.forEach((item,index)=>{
                    that.datalist.push({
                        code:item.value,
                        name:item.name
                    });
                    that.itemlist.push({
                        code:item.value,
                        name:item.name
                    });
                })
            }
        },
    },
    mounted(){
        this.createOnceToken();
        this.getAreacode();
    }
}
</script>
